<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>bui-ssm快速开发框架</title>
    <head th:include="source::header"></head>
    <style>
			body {
				position: relative;
			}
			
			body > div {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			div#main_body div:first-child {
				border-right: none;
			}
			.k_tab_header_ulwrap ul li.actived, .k_tab_header_ulwrap ul li:hover {
			    border-color: #ccc;
			    -moz-border-radius: 0px 0px 0 0;
			    -webkit-border-radius: 0px 0px 0 0; 
			    border-radius: 0px 0px 0 0;
			    background: #fff;
			}
			.k_tab_header_ulwrap ul li.actived {
			    border-left: 1px solid #ccc;
			    border-right: 1px solid #ccc;
			    border-top:none;
			    background: #fff;
			    position: relative;
			    z-index: 10;
			    height: 105%;
			}
			.k_tab_header_wrap {
			    width: 100%;
			    height: 30px;
			    position: absolute;
			    top: 0;
			    left: 0;
			    z-index: 2;
			    background-color: #F8F8F8;
			    overflow: hidden;
			}
			a.k_menu_actived, a.k_menu_actived i {
			    color: #0081ff!important;
			    background: #FFFFFF!important;
			}
			#memu_accordion > div{
				width:100%;
				position: absolute;
				top:0;
				left:0;
			}
			#_menu_info{				
				height: 75px;				
				z-index: 5;
				background: #F0F0F0;
			} 
			#_menu_tree{
				z-index: 4;
				height: 100%;
				border-top:78px solid #F0F0F0;
			}
			#_alert_msg1{
				padding-top: 25px;
			}
			.index_alert_msg {
				height:30px;
				line-height: 30px;
				float:left;	
				position: relative;		
				cursor: pointer;	
				width:60px;
			}
			.index_alert_msg i {
				font-size: 25px;
				color:#D3275A;
				font-weight: bold;
				top: -8px;
    			position: relative;
    			left:5px;
			}
			.index_alert_msg span{
				position: relative;
			    top: -3px;
			    left: -18px;
			    color: #F27600;
			    font-size:12px;
			}
			
			.index_alert_msg p{
				position:absolute;top:16px;
			}
    </style>
</head>
<body>
<div id="header">
    <h5><div class="header_logo"></div>bui-ssm快速开发框架 v-0.0.1</h5>
    
    <div id="theme_ops">
    	<a id='index'>风格1</a> <a id='index2'>风格2</a> <a id='index3'>风格3</a>
    </div>
    
    <div id="user_info">
    	<span><i style="padding-right:6px;font-size:1.5em;color:#fff;" class='fa fa-user-circle-o'></i></span>
    	<span class="_user_name">[(${loginUser})]</span>
    </div>
    <div id="logout" th:title="${Lang.common_logout}">
    	<i class="fa fa-logout-1"></i>
    </div>
</div>
<div id="main_body" class="k_box_size">
	

</div>
</body>
<script type="application/javascript">
    function pageLoaded() {
      	var themeIndex = '[(${themeIndex})]';
    	var allOps = $("#theme_ops").children("a").click(function(){
    		$(this).addClass("actived").siblings().removeClass("actived");
    		window.location.href = $B.getHttpHost(ctxPath)+"main/page/"+$(this).attr("id");
    	}).each(function(){
    		var $t = $(this);
    		if($t.attr("id") === themeIndex){
    			$t.addClass("actived").siblings().removeClass("actived");
    		}
    	});
    	$("#user_info").children("._user_name").dropDownList([
    		{
    			text:'个人信息',
    			icon:'fa-address-card-o',
    			click:function(){
    				alert("个人信息");
    			}
    		},{
    			text:'修改密码',
    			icon:'fa-lock',
    			click:function(){
    				alert("修改密码");
    			}
    		},{
    			text:'系统配置',
    			icon:'fa-cog-alt',
    			click:function(){
    				alert("fa-gear");
    			}
    		}
    	]);
    	var menuJson = [(${menuJson})];
    	console.log(JSON.stringify(menuJson));
    	var currentActived;
    	var $tab;
    	if(menuJson.length > 0){ //
            var accordion = $("<div id='memu_accordion' style='position:relative;'><div class='k_box_size' id='_menu_info'></div> <div  class='k_box_size'  id='_menu_tree'></div> </div>");
            var layout = new $B.Layout($("#main_body"), {
                onCreated: function (params) { //function(){} 布局创建完成事件,
                    //console.log("onCreated " + JSON.stringify(params));
                    if(params.i === 1){
                    	 $tab = new $B.Tab($("#_tab"), {
                    		 tabCount:10,//限制只能打开6个tab
                             cxtmenu: true, //右键菜单
                             onLoaded: function (title) { //加载后                                 
                             },
                             onClosed: function (title) {                                 
                            	 var actLi = $tab.getActived();
                            	 var newData = actLi.data("itdata");
                            	 currentActived.children("div").removeClass("k_tree_clicked_cls");
                            	 for(var k = 0 ,klen = ulArray.length ; k < klen ;++k){
                          			var activedLi = ulArray[k].find("#"+newData.id);
                          			if(activedLi.length > 0){
                          				activedLi.children("div").addClass("k_tree_clicked_cls");
                         				currentActived = activedLi;
                         				break;
                          			}
                          		 }
                             },
                             onClick: function (title,data) {                             	
                             	var curData = currentActived.children("div").data("data");
                             	if(curData && curData.id !== data.id){
                             		for(var k = 0 ,klen = ulArray.length ; k < klen ;++k){
                             			var activedLi = ulArray[k].find("#"+data.id);
                             			if(activedLi.length > 0){
                             				currentActived.children("div").removeClass("k_tree_clicked_cls");
                             				activedLi.children("div").addClass("k_tree_clicked_cls");
                             				currentActived = activedLi;
                             				break;
                             			}
                             		}
                             	}
                             	if(data.id === 0){
                             		currentActived.children("div").removeClass("k_tree_clicked_cls");
                             	}
                             },
                             tabs:[{
                             	  title: '首页',
                                  iconCls: 'fa-mail',
                                  data:{id:0},
                                  closeable: false,
                                  actived: true,
                                  url:$B.getHttpHost(ctxPath)+"personal/page/index"
                             }]
                         });             
                    }                      
                },
                onLoaded: function (data, params) { //加载完成
                    //console.log("onLoaded data = " + JSON.stringify(data) + " params=" + JSON.stringify(params));
                },
                items: [ //参考items说明
                    {
                        width: 230,
                        header: false, //是否需要标题栏
                        title: '系统面板', //标题
                        expandable: false,
                        iconCls: 'fa-cog-alt', //样式
                        content: accordion
                    }, {
                        header: false, //是否需要标题栏
                        iconCls: 'fa-file-code',
                        width: 'auto', //宽度
                        title: '页面模块',
                        content:'<div style="width:100%;height:100%" class="k_box_size" id="_tab"></div>'
                        
                    }
                ]
            });
            //创建导航菜单
            var ul = $("<ul/>").appendTo(accordion.children("#_menu_tree"));
            new $B.Menu(ul,{
            	ellipsis:true,            	
				data: menuJson,
				onClick:function(_data,isParent){
					if(!isParent){
					   	
                    		if(currentActived){
                    			currentActived.children("div").removeClass("k_tree_clicked_cls");
                    		}
                    		currentActived = this; // _data;                    		
                        	var url = $B.getHttpHost(ctxPath) + _data.controller+"/page/"+_data.pageName ;
                        	if(_data.params && _data.params !== ""){
                        		url = url + "?"+ _data.params;
                        	}
                            $tab.add({
                                title: _data.menuText,
                                iconCls: _data.menuIconCss,
                                data:{id:_data.id},
                                closeable: true,
                                url: url
                            });                    	
						
						}
				}
			});
            //信息
            var $tipWrap = accordion.children("#_menu_info");
            $tipWrap.append("<div class='k_box_size' style='float:left;padding:0 5px;width:40px;padding-right: 3px;'><i style='font-size:40px;color:#4BA5FC;line-height:75px;' class='fa fa-user'></i></div>");
    		$tipWrap.append("<div style='float:left;height:100%;width:188px'><div style='line-height:0px;height:0px;width:100%;'  id='_alert_msg1'></div><div id='_alert_msg2' style='line-height:37px;height:37px;width:100%;'></div></div>");
    		var msg1 = $tipWrap.find("#_alert_msg1");
    		$("<div class='index_alert_msg k_box_size'><i class='fa fa-comment-empty'><span>21</span></i><p>待办</p></div>").appendTo(msg1);
    		$("<div class='index_alert_msg k_box_size'><i class='fa fa-comment-empty'><span>5</span></i><p>告警</p></div>").appendTo(msg1);
    		$("<div class='index_alert_msg k_box_size'><i class='fa fa-comment-empty'><span>8</span></i><p>通知</p></div>").appendTo(msg1);
    		var msg2 = $tipWrap.find("#_alert_msg2");
    	}else{
    		$B.error({
    			message:'尚未登录或无访问权限!' ,
    			timeout:3,
    			onClosed:function(){
    				window.location.href = $B.getHttpHost(ctxPath)+"main/page/login";
    			}
    		});	
    	}        
        $("#logout").click(function(){
        	  $B.confirm({                  
                  message: '请确认退出系统？',
                  okFn: function () {
                  	var win = $B.message("正在退出......");
        			$B.request({
        				url:$B.getHttpHost(ctxPath)+"main/logout",
        				data:{},
        				ok:function(msg,data){					
        					window.location.href = $B.getHttpHost(ctxPath)+"main/page/login";
        				},
        				final:function(){
        					win.close();
        				}
        			});
                  }
              });
        });
    };
    $(function () {
        pageLoaded();
    });
</script>
</html>